<template>
  <el-row>
    <el-col :span="8" style="text-align: center; padding: 0 50px 0 30px">
      <el-card style="padding-bottom: 20px">
        <div slot="header">
          <span>我的信息</span>
        </div>
        <div class="block">
          <span style="float: left;">用户名:</span>
          <span style="float: right">{{user.name}}</span>
        </div>
        <div class="block">
          <span style="float: left;">手机号码:</span>
          <span style="float: right">{{user.mobileNumber}}</span>
        </div>
        <div class="block">
          <span style="float: left;">用户类型:</span>
          <span style="float: right">{{userType}}</span>
        </div>
        <div class="block">
          <span style="float: left;">我的包裹数:</span>
          <span style="float: right">{{myPkgCnt}}</span>
        </div>
      </el-card>
      <el-card style="margin-top: 40px">
        <div slot="header">
          <span>操作</span>
        </div>
        <div style="text-align: left">
          <span style="margin-right: 20px">查看</span>
          <el-button @click="$router.push('/my/addr')" round>我的地址</el-button>
          <el-button @click="$router.push('/my/pkg')" round>我的包裹</el-button>
          <el-divider/>
          <span style="margin-right: 20px">更新</span>
          <el-button @click="updateIt(0)" round>用户名</el-button>
          <el-button @click="updateIt(1)" round>密码</el-button>
          <br><br>
          <el-button @click="updateIt(2)"
                     style="margin-left: 52px" round>手机号码
          </el-button>
          <el-divider/>
          <span style="margin-right: 20px">新建</span>
          <el-button @click="$router.push('/pkg/new')" round>包裹</el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div v-if="updateForm">
        <el-card>
          <div slot="header">{{updateItem===0?'更新用户名':updateItem===1?'更新密码':'更新手机号码'}}
          </div>
          <el-form v-if="updateItem===0" label-position="top">
            <el-form-item label="当前用户名">
              <span>{{user.name}}</span>
            </el-form-item>
            <el-form-item label="您要更新为">
              <el-input clearable v-model="value"/>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" @click="update">更新</el-button>
              <el-button @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
          <el-form v-else-if="updateItem===1" label-position="top">
            <el-form-item label="请输入旧密码">
              <el-input type="password" clearable v-model="pass[0]"/>
            </el-form-item>
            <el-form-item label="请输入新密码">
              <el-input type="password" clearable v-model="value"/>
            </el-form-item>
            <el-form-item label="请再次输入新密码">
              <el-input type="password" clearable v-model="pass[1]"/>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" @click="update">更新</el-button>
              <el-button @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
          <el-form v-else label-position="top">
            <el-form-item label="当前手机号码">
              <span>{{user.mobileNumber}}</span>
            </el-form-item>
            <el-form-item>
              <span>手机号码为账户的唯一凭证, 暂不支持修改!</span>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" @click="cancel">确认</el-button>
              <el-button @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <el-card v-else style="height: calc(100vh - 105px)">
        <el-scrollbar>
          <el-calendar style="height: calc(100vh - 105px)" :v-model="new Date()"/>
        </el-scrollbar>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "MyInfo",
  methods: {
    updateIt(item) {
      this.cancel()
      this.updateForm = true
      this.updateItem = item
    },
    cancel() {
      this.updateForm = false
      this.value = ''
      this.pass = []
    },
    update() {
      const i = this.updateItem
      this.validator[i](() => {
        this.$axios.put(this.$serverUrl
            + this.updateUrl[i],
            {id: this.user.id, attribute: this.value})
            .then(response => {
              const rtn = response.data
              if (rtn) {
                this.$message.success('修改成功!')
                if (i === 0) {
                  const user = this.user
                  user.name = this.value
                  this.$store.commit('setUser', user)
                }
                this.value = ''
                this.updateForm = false
              } else {
                this.$message.success('修改失败!')
              }
            })
            .catch(error => {
              console.log(error)
              this.$message.success('修改失败!')
            })
      })
    },
  },
  data() {
    return {
      user: this.$store.state.user,
      myPkgCnt: 0,
      userTypeList: this.$store.state.userTypeList,
      userType: '',
      updateForm: false,
      updateItem: 0,
      updateUrl: [
        "/user/updateName",
        "/user/updatePassword",
      ],
      value: '',
      pass: [],
      validator: [
        callback => {
          const name = this.value
          console.log(name)
          if (name === '') {
            this.$message.warning('请输入用户名')
          } else callback()
        },
        callback => {
          const oldPass = this.pass[0]
          const pass = this.value
          const checkPass = this.pass[1]
          if (pass.length < 6 || pass.length > 32) {
            this.$message.warning('长度应为 6 到 32 个字符')
          } else if (pass !== checkPass) {
            this.$message.warning('两次输入密码不一致');
          } else {
            this.$axios.post(this.$serverUrl
                + '/user/checkPass',
                {
                  id: this.user.id,
                  password: this.$md5(oldPass + this.user.mobileNumber)
                })
                .then(response => {
                  const rtn = response.data
                  if (!rtn) {
                    this.$message.warning('旧密码输入错误');
                  } else {
                    this.value = this.$md5(this.value
                        + this.user.mobileNumber)
                    callback()
                    this.pass = []
                  }
                })
                .catch(error => {
                  console.log(error)
                })
          }
        },
      ],
    }
  },
  created() {
    // console.log(this.user);
    for (const type of this.userTypeList) {
      if (this.user.type === type.value) {
        this.userType = type.label
      }
    }
    // console.log(this.userType)
    this.$axios.get(this.$serverUrl
        + '/pkg/myCnt?user=' + this.user.id)
        .then(response => {
          this.myPkgCnt = response.data
        })
  },
}
</script>

<style scoped>
.block {
  padding: 16px 12px;
}
</style>